import React from 'react';
import _ from 'lodash';
import { nanoid } from 'nanoid';
import { useNode } from '@craftjs/core';
import { Tabs, Slider, InputNumber, Radio } from 'antd';
import styles from './settings.less';

const columnSettingNums = [1, 2, 3, 4, 6, 8, 12, 24];
const columnMarks = _.assign({}, ..._.map(columnSettingNums, (v, i) => ({ [i]: v })));

export default () => {
  const {
    props: { rows, columns, align, gutter },
    actions: { setProp },
  } = useNode((node) => ({
    props: node.data.props,
  }));

  return (
    <div className={styles.settingContainer}>
      <Tabs>
        <Tabs.TabPane key="attribute" tab="属性">
          <div className={styles.settingContainerContent}>
            <div className={styles.rowsControl}>
              <div>行数：</div>
              <InputNumber
                size="small"
                value={rows}
                min={1}
                max={10}
                placeholder={'行数'}
                onChange={(v) => {
                  setProp((props) => {
                    const prevLength = props.rows * props.columns;
                    const nextLength = v * props.columns;
                    const nextItemIds =
                      prevLength <= nextLength
                        ? [
                            ...props.itemIds,
                            ..._.map(new Array(nextLength - prevLength), () => nanoid(12)),
                          ]
                        : props.itemIds.slice(0, nextLength);
                    props.rows = v;
                    props.itemIds = nextItemIds;
                  }, 500);
                }}
              />
            </div>
            <div className={styles.columnsControl}>
              <div>列数：</div>
              <Slider
                min={0}
                max={columnSettingNums.length - 1}
                value={_.indexOf(columnSettingNums, columns)}
                onChange={(v) => {
                  setProp((props) => {
                    const nextColumns = columnMarks[v];
                    const prevLength = props.rows * props.columns;
                    const nextLength = props.rows * nextColumns;
                    const nextItemIds =
                      prevLength <= nextLength
                        ? [
                            ...props.itemIds,
                            ..._.map(new Array(nextLength - prevLength), () => nanoid(12)),
                          ]
                        : props.itemIds.slice(0, nextLength);
                    props.columns = nextColumns;
                    props.itemIds = nextItemIds;
                  }, 500);
                }}
                marks={columnMarks}
                step={null}
                tooltip={{
                  formatter: (value) => value && columnMarks[value],
                }}
              />
            </div>
            <div className={styles.alignControl}>
              <div>垂直对其方式：</div>
              <Radio.Group
                value={align}
                options={[
                  { label: '上对齐', value: 'top' },
                  { label: '居中对齐', value: 'middle' },
                  { label: '下对齐', value: 'bottom' },
                ]}
                onChange={(e) => {
                  setProp((props) => (props.align = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.gutterControl}>
              <div>间距设置：</div>
              <div className={styles.gutterControlList}>
                <div className={styles.gutterControlItem}>
                  <span>行间距：</span>
                  <InputNumber
                    size="small"
                    value={_.last(gutter)}
                    min={1}
                    max={100}
                    placeholder={'行间距'}
                    onChange={(v) => {
                      setProp((props) => (props.gutter = [_.first(props.gutter), v]), 500);
                    }}
                  />
                </div>
                <div className={styles.gutterControlItem}>
                  <span>列间距：</span>
                  <InputNumber
                    size="small"
                    value={_.head(gutter)}
                    min={1}
                    max={100}
                    placeholder={'列间距'}
                    onChange={(v) => {
                      setProp((props) => (props.gutter = [v, _.last(props.gutter)]), 500);
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};
